<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,html{
				padding:0;margin:0px;width:100%;
				text-align: center;
			}
			#myCanvas{
				display: inline-block;
				margin:25px auto;
				border:1px solid red; 
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas">您的浏览器不支持 HTML5 canvas 标签。</canvas>
	</body>
	<script  type="module">
		/*
			 移动动画 实现方式有两种
			 1，可以直接修改坐标实现图形移动
			 2，可以在shader里通过向量相加实现图形的移动
			 
		*/ 
		import initShader from "./js/createShader.js"
		var canvas = document.getElementById("myCanvas"); 
		canvas.width = 500;
   		canvas.height = 500;
		var gl=canvas.getContext("webgl")    
		let vertexShader=` 
			attribute vec2 a_position;
			uniform float u_size;
			uniform vec4 u_translate;
			attribute vec3 a_color;
			varying vec3 v_color;
			void main(){
				v_color=a_color;
				gl_Position=vec4(a_position,0.0,1.0)+u_translate;
				gl_PointSize=u_size;
			}
		`;
		let fragementShader=`
			//接受js环境的变量值
			precision mediump float;
			varying vec3 v_color;
			void main(){
				// gl_FragColor=vec4(1.0,0.0,0.0,1.0);
				gl_FragColor=vec4(v_color,1.0); 
			} 
		`;    
		//初始化变量
		initShader(gl,vertexShader,fragementShader);

		//顶点数组信息
		let vertexAry=[ 
			-0.5, 0.5, 1.0, 0.0, 0.0,
			0.5,  0.5, 0.0, 1.0, 0.0,
			0.5,  -0.5, 0.0, 0.0, 1.0,
		   -0.5,  -0.5, 0.0, 1.0, 0.0,
		] 

		//n ：点个数  R：圆半径
		let n=6,R=0.5;	 
		vertexAry=[] 
		//画圆
		for(let i=0;i<n;i++){
		   let deg=2*Math.PI/n*i;
		   let x=Math.cos(deg)*R;
		   let y=Math.sin(deg)*R;
		   let r=(Math.random()-0.5)*2;
		   let g=(Math.random()-0.5)*2;
		   let b=(Math.random()-0.5)*2;
			vertexAry.push(x,y,r,g,b);
		}


		//将64位转化成32位
		 vertexAry=new Float32Array(vertexAry); 
		//丈量数字所占用byte的长度
		 let size=vertexAry.BYTES_PER_ELEMENT;
		console.log("BYTE长度",size); 

		// 创建buffer数组
		let buffer=gl.createBuffer();
		//绑定buffer
		gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
		//绑定数据
		gl.bufferData(gl.ARRAY_BUFFER,vertexAry,gl.STATIC_DRAW);
			
		//获取vertex下的position变量
		let a_position=gl.getAttribLocation(gl.program,'a_position');
		let a_color=gl.getAttribLocation(gl.program,'a_color');
		let u_size=gl.getUniformLocation(gl.program,'u_size');
		gl.uniform1f(u_size,10.0);

		//bufferAry绑定数据
		gl.vertexAttribPointer(
			a_position,
			2,		  //将vertexAry数组定义为2个数是一组
			gl.FLOAT, //buffer内部数据的类型
			false,// 这个是正交化值数学知识
			5*size,//这个描述了每个数所占用byte的长度值  每5个是一组数据，所占用byte的长度
			0    //偏移几个数字长度（这里的长度是byte类型的长度）
		);

		gl.vertexAttribPointer(
			a_color,
			3,//将vertexAry数组定义为3个数是一组
			gl.FLOAT, //buffer内部数据的类型
			false,// 这个是正交化值数学知识
			5*size,//这个描述了每个数所占用byte的长度值  每5个是一组数据，所占用byte的长度
			2*size,//偏移几个数字长度（这里的长度是byte类型的长度）
		);
		

		console.log();
		//确认给a_position赋值
		gl.enableVertexAttribArray(a_position);
		gl.enableVertexAttribArray(a_color); 
		

		let speedx=0.008,speedy=0.005,x=.5,y=0.0;
		let u_translate=gl.getUniformLocation(gl.program,"u_translate");
		//移动动画
		function tick(){
			//定义清空后的颜色值	
			gl.clearColor(0.5,0.5,0.5,1.0);
			//清空画布
			gl.clear(gl.COLOR_BUFFER_BIT); 	
			x+=speedx
			y+=speedy 
			if(x>.5||x<-.5) speedx*=-1; 
			if(y>.5||y<-.5)speedy*=-1; 
			 
			//移动图形 
			gl.uniform4f(u_translate,x,y,0.0,0.1);

			 /* 
			@param 0:从哪个点开始
			@param 3:画3个点
			*/ 
			gl.drawArrays(gl.POINT,0,n);   
			gl.drawArrays(gl.LINES,0,n); //LINES LINE_STRIP LINE_LOOP 
			gl.drawArrays(gl.LINE_STRIP,0,n); //LINES LINE_STRIP LINE_LOOP 
			gl.drawArrays(gl.LINE_LOOP,0,n); //LINES LINE_STRIP LINE_LOOP  

			//  gl.drawArrays(gl.TRIANGLES,0,n) //TRIANGLES TRIANGLE_STRIP  TRIANGLE_FAN
			//  gl.drawArrays(gl.TRIANGLE_STRIP,0,n) //TRIANGLES TRIANGLE_STRIP  TRIANGLE_FAN
			//  gl.drawArrays(gl.TRIANGLE_FAN,0,n) //TRIANGLES TRIANGLE_STRIP  TRIANGLE_FAN

			requestAnimationFrame(tick);
		}
		tick();


	</script>
</html>